<template>
  <el-menu default-active="1" class="el-menu-vertical-demo">
    <router-link to="/admin">
      <el-menu-item index="1">
        <el-icon>
          <location />
        </el-icon>
        <template #title>首页</template>
      </el-menu-item>
    </router-link>
    <el-sub-menu index="2" class="el-sub-menu">
      <template #title>
        <el-icon>
          <icon-menu />
        </el-icon>
        <span>菜单</span>
      </template>
      <router-link to="/admin/car">
        <el-menu-item index="2-1">
          <template #title><span>车辆信息管理</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/admin/carmodel">
        <el-menu-item index="2-2">
          <template #title><span>车型信息管理</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/admin/owners">
        <el-menu-item index="2-3">
          <template #title><span>车主信息管理</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/admin/rentmanagement">
        <el-menu-item index="2-4">
          <template #title><span>租赁信息管理</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/admin/salesman">
        <el-menu-item index="2-5">
          <template #title><span>业务员信息管理</span></template>
        </el-menu-item>
      </router-link>
      <router-link to="/admin/renters">
        <el-menu-item index="2-6">
          <template #title><span>租客信息管理</span></template>
        </el-menu-item>
      </router-link>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon>
          <setting />
        </el-icon>
        <span>设置</span>
      </template>
      <el-menu-item index="3-1-2" @click="exit()">退出</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

defineProps(['exit']);
</script>

<style scoped>

.el-menu-item,
.el-sub-menu__title {
  font-size: 16px;
  /* 根据需要调整这个值 */
}

/* 更改菜单激活时的主题色 */
.el-menu-item.is-active {
  background-color: rgba(95, 158, 160, 0.7) !important;
  color: white !important;
  /* 如果需要改变激活或悬停时的文字颜色 */
  border-radius: 0px;
}

/* 更改菜单项激活时的文字颜色 */
.el-menu-item.is-active {
  color: white !important;
}

/* 更改下拉箭头颜色（如果需要） */
.el-sub-menu .el-sub-menu__icon-arrow {
  color: #ffc107;
}

/* 更改展开/折叠图标颜色（如果需要） */
.el-menu--collapse .el-sub-menu__icon-arrow {
  color: #ffc107;
}

/* 去除下划线 */
.el-menu-vertical-demo a {
  text-decoration: none;
  color: inherit;
  /* 确保链接颜色与菜单项一致 */
}

/* 设置菜单默认背景颜色（如果需要） */
.el-menu-vertical-demo {
  background-color: white;
  /* 默认白色背景，根据需要调整 */
}

/* 设置菜单宽度 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 设置菜单项之间的间距 */
.el-menu-item {
  margin-bottom: 10px;
}

/* 确保所有菜单项字体大小一致 */
.el-menu-item,
.el-sub-menu__title {
  font-size: 16px;
}
</style>
